<template>
		<view class="pics">
			<!-- 搜索 -->
			<search></search>
			<!-- 内容 -->
			<view class="content">
				<view class="content_left" >
					<scroll-view scroll-y="true" >
						<view :class="index===active?'active':''" 
						class="mun_item" 
						v-for="(item,index) in leftMueList" 
						:key="index" 
						@click="getActive(index)">
							{{item}}
						</view>
					</scroll-view>
				</view>
				<!-- 右侧-->
				
				<view class="content_right">
					<scroll-view scroll-y="true" scroll-top="scrollTop" >
					   <view class="good_group" v-for="(item1,index) in rightMueList" :key="index">
					   	   <view class="good_title">
							   <text class="text">/</text>
					   	   	    {{item1.cat_name}}
								<text class="text">/</text>
					   	   </view>
						   <view class="good_list">
						   	  <view class="navto" v-for="(item2,index2) in item1.children" :key="index2" @click="getdetail(item2.cat_id)">
							   <image :src="item2.cat_icon" mode="widthFix"></image>
							   <view class="good_name">
							   	{{item2.cat_name}}
							   </view>
							  </view> 
						   </view>
					   </view>
					</scroll-view>
				</view>   
			</view>
		</view>
</template>

<script>
	import search from "../../components/serch.vue"
	export default {
		data() {
			return {
				leftMueList:[],
				rightMueList:[],
				active:0,
				scrollTop:0
			}
		},
		Cates:[],
		onLoad() {
			// 缓存
			const info=uni.getStorageSync('shop');
			if(!info){
				this.getType()
			}else{
				if(Date.now()-info.time>1000*10){
					this.getType()
				}else{
					this.Cates=info.data;
					// 左侧数据
					let leftMenList=this.Cates.map(v=>v.cat_name);
					// 右侧数据
					let rightMenList=this.Cates[0].children;
					this.leftMueList=leftMenList
					this.rightMueList=rightMenList
				}
			}
		},
		methods: {
       async getType(){
			const res=await this.$myRequest({
				url:'/api/public/v1/categories'
				 })
				 uni.setStorageSync("shop",{time:Date.now(),data:this.Cates})
			     console.log(res.data.message)
				this.Cates=res.data.message
				
				// 左侧数据
				let leftMenList=this.Cates.map(v=>v.cat_name);
				// 右侧数据
				let rightMenList=this.Cates[0].children;
				this.leftMueList=leftMenList
				this.rightMueList=rightMenList
		},
		getActive(res){
			let rightMenList=this.Cates[res].children;
			this.rightMueList=rightMenList
			this.active=res
			this.scrollTop=0
		},
		getdetail(res){
			uni.navigateTo({
				url:"/pages/good_list/good_list?cid="+res
			})
		}
		},
		components:{
			search
		}
		
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.pics{
		height: 100%;
		.content{
			  height: calc(100vh - 90rpx);
			  display: flex;
			  .content_left{
				  overflow: scroll;
				  flex: 2;
				  .mun_item{
					  display: flex;
					  flex-direction: column;
					  align-items: center;
					  padding: 15rpx 0;
					  font-size: 35rpx;
					  border-bottom: 1rpx solid #eee;
					  border-right: 1px solid #eee;
				  }
			  }
			  .content_right{
				  overflow: scroll;
				  flex: 5;
				  .good_group{
					  .good_title{
						    display: flex;
							flex-direction: row;
							justify-content: center;
							height: 80rpx;
						  .text{
							  color: #eee;
							  margin: 0rpx 20rpx;
						  }
					  }
					  .good_list{
						  display: flex;
						  flex-direction: row;
						  flex-wrap: wrap;
						 .navto{
							  width: 33.33%;
						  }
						  image{
							  padding: 0rpx 5rpx;
							  width: 100%;
						  }
						  .good_name{
							  text-align: center;
						  }
					  }
				  }
			  }
			  .active{
				  color: $shop-color;
				  border-left: 10rpx solid $shop-color;
			  }
		}
	}
</style>
